<template>
  <div class="buyer">
    <el-main>
      <el-row :gutter="10" style="margin-bottom: 10px;">
        <el-col :span="6">
          <el-input placeholder="请输入供应商名称/单号" v-model="input3" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"
              style="background-color: #1890FF; font-size: 14px; color: #FFFFFF;"></el-button>
          </el-input>
        </el-col>
        <el-col :span="5">
          <div style="margin-top: 8px;">
            <el-checkbox v-model="checked">不显示禁用账号</el-checkbox>
          </div>
        </el-col>
        <el-button style="float: right;margin-right: 5px;" type="primary" @click="addfunc" >新增</el-button>
      </el-row>
      <el-table :data="tableData" border max-height="560" style="width: 100%">
        <el-table-column prop="code" label="采购员编号">
        </el-table-column>
        <el-table-column prop="name" label="采购员名称">
          <template slot-scope="scope">
            <span class="no_Code" @click="goDetail(scope.row)">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column  prop="sysUserName"  label="绑定用户">
          <template slot-scope="scope">
            <!-- 状态这里可以改 -->
            {{usersDict[scope.row.sysId] | formatUserName}}
          </template>
        </el-table-column>
        <el-table-column  prop="statusName"  label="禁用状态">
          <template slot-scope="scope">
            <!-- 状态这里可以改 -->
            {{statusEnum[scope.row.status]}}
          </template>
        </el-table-column>
        <el-table-column fixed="right"  prop="操作"  label="操作">
          <template slot-scope="scope">
            <el-button @click="$router.push('/purchase/initialvalue/purchaser/binduser/'+scope.row.id)" size="small" type="text">
              绑定账号
            </el-button>
            <el-button @click="$router.push('/purchase/initialvalue/buyeredit/'+scope.row.id)" size="small" type="text">
              编辑
            </el-button>
            <el-button @click="disableBuyer(scope.row.id,scope.row.status)" size="small" type="text">
              {{ disableButtonText[scope.row.status]}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-main>
  </div>
</template>

<script>
  import {getbuyerAll,delbuyer,changeBuyerStatus,getstatusenum} from '@/api/purchase/buyerapi.js'
  import { getWarehouseAreaDel } from "@/api/warehouse";
  import { listsysusers } from "@/api/purchase/supplierapi";
  export default {
    data() {
      return {
        checked: true,
        currentPage: 1,
        tableData:[],
        statusEnum:{},
        usersDict: {},
        disableButtonText:{1:"禁用",0:"启用"},
        dqxzh:-1,//当前鼠标移入选中的行
      }
    },
    async created() {
      await this.fetchSysUsers();
      await this.getStatusEnum();
      await this.getList();
    },
    filters:{
      formatUserName: function(username){
        return username?username:"未绑定";
      }
    }
	,methods:{

      goDetail(item) {
        this.$router.push({ path: '/purchase/initialvalue/buyerdetails/'+item.id})
      },
      async fetchSysUsers(){
        let res = await listsysusers()
        this.users = res.data.list;
        for(let i=0; i<this.users.length; i++){
          this.usersDict[ this.users[i].id ] = this.users[i].username;
        }
      },

      async disableBuyer(buyerId, status){
        let that = this;
        this.$confirm('确定修改用户状态？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const res = await changeBuyerStatus({
            id: buyerId, status: status
          })
          if (res.status==200) {
            await that.getList();
            this.$message({
              type: 'success',
              message: '操作成功',
            })
          }else{
            this.$message({
              type: 'error',
              message: '操作失败',
            })
          }
        })
      },
      async getStatusEnum() {
        let res = await getstatusenum({});
        this.statusEnum = res.data;
      },
      async getList() {
        let data = await getbuyerAll({})
        this.currentPage = data.pageNum;
        this.total = data.total
        this.tableData = data.list
      },

      async handleCurrentChange(page) {
        this.currentPage = page
        await this.getList()
      },


		addfunc(){
			this.$router.push('/purchase/initialvalue/buyeradd')
		},
    async delfunc(val){
      let res = await delbuyer(val.id)
      if(res.status == 200){
        this.$message({
          message:"删除成功",
          type:"success"
        })
        let data = await getbuyerAll({})
        this.currentPage = data.pageNum;
        this.tableData = data.list
      }else{
        this.$message({
          message:"采购员已经与商品绑定，请先删除对应商品再删除",
          type:"error"
        })
      }
    }
	}
  }
</script>

<style>
  .buyer  .el-table_1_column_4{
    padding: 0 !important;
  }
  .buyer  .el-table_1_column_4 .cell{
    height: 100%;
  }
  .no_Code {
    color: #1890ff;
    cursor: pointer;
  }
</style>
